import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { Image } from "antd-mobile";
import "./NewsItem.scss";

function NewsItem(props) {
  const { child } = props;
  // 如果没值，先不渲染
  if (!child) return null;

  return (
    <div className="news-item-box">
      <Link to={{ pathname: `/detail/${child.id}` }}>
        <div className="content">
          <h4 className="title">{child.title}</h4>
          <p className="author">{child.hint}</p>
        </div>
        <Image src={child.images[0]} lazy />
      </Link>
    </div>
  );
}

NewsItem.defaultProps = {
  child: null,
};

NewsItem.propTypes = {
  child: PropTypes.object,
};

export default NewsItem;
